<template>

  <div class="adminHandle">
    <h2 style="color: #666666">学生评教系统</h2>
    <div class="astbox">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="teacherName"
          label="教师名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="courseScore"
          label="课程评分"
          width="180">
          <template slot-scope="scope">
        <el-rate
          v-model="scope.row.courseScore"
          :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
        </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="teacherScore"
          label="教师评分"
          width="180">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.teacherScore"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="teacherScore"
          label="教材评分"
          width="180">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.bookScore"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="stuComment"
          label="留言"
          width="180">
          <template slot-scope="scope">
            <div style="padding-top: 10px;width: 80%;">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="scope.row.stuComment"
                maxlength="20"
                show-word-limit
                autosize
                resize>
              </el-input>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="functionbox">
      <el-button type="primary" round @click="submitfunc()">提交<i class="el-icon-upload el-icon--right"></i></el-button>
      <el-button type="danger" round @click="deleteAll()">清空<i class="el-icon-delete el-icon--right"></i></el-button>
    </div>
  </div>
</template>


<script>
  import axios from 'axios'

  export default{
    name:"StudentTeachAst",
    data(){
      return{
        tableData:[],
      }
    },
    methods:{
      deleteAll(){
        for(var i=0;i<this.tableData.length;i++){
          this.tableData[i].stuComment = ''
          this.tableData[i].courseScore = 0
          this.tableData[i].teacherScore = 0
          this.tableData[i].bookScore = 0
        }
      },
      submitfunc(){
        for(let j=0;j<this.tableData.length;j++){
          if(this.tableData[j].courseScore === 0 && this.tableData[j].teacherScore === 0 &&
            this.tableData[j].bookScore === 0){
            console.log('不能发空的评教')
          }else{
            axios.defaults.headers.common["token"] = this.token;
            axios.post((this.ip + '/stuComment/'),JSON.stringify(this.tableData[j]),{headers:
                {'Content-Type':'application/json'}}).then((response)=>{
              console.log(response)
              console.log(response.data)

            }).catch(function (error) {
              console.log(error);
            });
          }
          }
        alert('提交成功')
      },
    },
    watch:{
      tableData:{
        deep:true,
        handler(value){

        }
      }
    },
    mounted(){
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.get((this.ip + '/stuComment/getTeacherMsg')).then((response)=>{
        console.log(response)
        console.log(response.data)
        for(let i=0;i<response.data.length;i++){
          this.tableData.push({
            cid:response.data[i].cid,
            teacherNumber:response.data[i].teacherNumber,
            teacherName:response.data[i].teacherName,
            courseName:response.data[i].courseName,
            courseScore: 0,
            teacherScore: 0,
            bookScore: 0,
            stuComment:'',
          })
        }
      }).catch(function (error) {
        console.log(error);
      });

    }
  }

</script>


<style>
  .adminHandle{
    width: 100%;
    padding: 5px 10px 0 10px;
    margin: 20px 100px 0 100px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

  }
  .astbox{
    padding-top: 20px;
  }
  .functionbox{
    padding-top: 10px;
  }
</style>

